<template>
  <div class="page-box">
    <div class="page-title fonsSizeTitle">考核季度：{{quarterInfo.quarter_name}}</div>
    <div class="rulePart-box">
      <div class="rulePart-box-title  fonsSizeTitle">价值观（占比40%）</div>
      <div v-for="(item,index) of senseOfWorth" :key="index" class="rulePart">
        <div class="rulePart-title fonsSizeConTitle">
          {{item.question_name}} (占比{{item.rare}}%)
        </div>
        <!-- :class="{'rulePart-con-hide':!item.showAll}" -->
        <div class="rulePart-con">
          <van-field class="fonsSizeCon" readonly v-model.trim="item.task" type="textarea" placeholder="" rows="3" autosize />
        </div>
        <!-- <div @click="item.showAll=!item.showAll" class="rulePart-con-button">{{item.showAll?'收起':'展开'}}</div> -->
        <div class="work">
          <van-cell-group>
            <van-field v-model.trim="item.messge" required clearable label="自评 " type="textarea" placeholder="请输入" rows="3" autosize />
          </van-cell-group>
          <van-cell-group>
            <van-field @change="scoreChange('senseOfWorth',index,Number(item.score))" required v-model.trim="item.score" clearable label="评分 " type="number" placeholder="请输入1-100之间的数字">
            </van-field>
          </van-cell-group>
        </div>
      </div>
    </div>
    <div class="rulePart-box">
      <div class="rulePart-box-title  fonsSizeTitle">工作绩效（占比60%）</div>
      <div v-for="(item,index) of jobPerformance" :key="index" class="rulePart">
        <div class="rulePart-title fonsSizeConTitle">
          {{item.question_name}} (占比{{item.rare}}%)
        </div>
        <!-- :class="{'rulePart-con-hide':!item.showAll}" -->
        <div class="rulePart-con ">
          <div class="fonsSizeCon">{{item.task}}</div>
        </div>
        <!-- <div @click="item.showAll=!item.showAll" class="rulePart-con-button">{{item.showAll?'收起':'展开'}}</div> -->
        <div class="work">
          <van-cell-group>
            <van-field required clearable v-model.trim="item.messge" label="自评 " type="textarea" placeholder="请输入" rows="3" autosize />
          </van-cell-group>
          <van-cell-group>
            <van-field @change="scoreChange('jobPerformance',index,Number(item.score))" required v-model.trim="item.score" clearable label="评分 " type="number" placeholder="请输入1-100之间的数字">
            </van-field>
          </van-cell-group>
        </div>
      </div>
    </div>
    <div class="rulePart-box">
      <van-cell-group style="padding:22px 26px;color:#000" class="cenBet">
        <div>
          总评分
        </div>
        <div>
          {{sumScore.num}}分 {{sumScore.grade.gradeadd}}
        </div>
      </van-cell-group>
    </div>
    <div v-if="senseOfWorth.length||jobPerformance.length" class="screen_fixed cenCen">
      <van-button class="cursor maxWidth" @click="submitFrom()" style="width:100%" icon="success" type="info">提交</van-button>
    </div>
  </div>
</template>
<script>
import service from "@/api";
import { grade } from "@/components/js/grade.js";
export default {
  data() {
    return {
      sumScore: {
        num: 0,
        grade: {}
      }, //总的
      senseOfWorth: [], //价值观部分
      jobPerformance: [], //工作绩效部分
      quarterInfo: {} //季度信息
    };
  },
  created() {
    this.score_listAll();
  },
  methods: {
    async score_listAll() {
      this.$store.state.loading = true;
      this.$store.state.loadingText = "获取数据中";
      const { success, data = {} } = await service.score_listAll({});
      this.$store.state.loading = false;
      if (!success) {
        return;
      }
      if (data.rows && data.rows.length) {
        this.quarterInfo = data.rows[0];
        if (data.rows[0].examineList.length) {
          this.senseOfWorth = [];
          this.jobPerformance = [];
          data.rows[0].examineList.map(item => {
            if (item.question_type == 1) {
              // 价值观部分
              let obj = {
                ...item,
                showAll: false,
                messge: "",
                score: ""
              };
              this.senseOfWorth.push(obj);
            } else {
              // 工作绩效部分
              let obj = {
                ...item,
                showAll: false,
                messge: "",
                score: ""
              };
              this.jobPerformance.push(obj);
            }
          });
        }
      } else {
        this.$toast.fail(`暂无自评数据`);
      }
      // console.log(this.quarterInfo);
    },
    // 计算总分
    scoreChange(who, index, score) {
      if (score < 1 || score > 100) {
        this.$toast.fail(`请输入1-100之间的数字`);
        if (who == "senseOfWorth") {
          this.senseOfWorth[index].score = 1;
        }
        if (who == "jobPerformance") {
          this.jobPerformance[index].score = 1;
        }
      }

      let examineList = this.senseOfWorth.concat(this.jobPerformance);
      this.sumScore.num = 0;
      examineList.map(item => {
        let num = (Number(item.score) || 0) * (item.rare / 100).toFixed(4);
        this.sumScore.num += num;
      });
      this.sumScore.num = this.sumScore.num.toFixed(1);
      this.sumScore.grade = grade(this.sumScore.num);
      // console.log(examineList);
    },
    // {,
    // 提交表单
    async submitFrom() {
      let examineList = this.senseOfWorth.concat(this.jobPerformance);
      const checkFromRes = await this.checkFrom(examineList);
      if (!checkFromRes.isPass) {
        this.$toast.fail(checkFromRes.errorMsg);
        return;
      }
      const alertRes = await this.$alert("此操作将进行自评提交");
      if (!alertRes) {
        return;
      }
      let subData = {
        examine_id: this.quarterInfo.id, //考核id
        markList: ""
      };
      let markList = [];
      examineList.map(item => {
        let obj = {
          examine_id: this.quarterInfo.id,
          examineb_id: item.id,
          messge: item.messge,
          score: item.score,
          // user_id: "评价人id",
          // user_name: "评价人名称",
          score_type: 0 //评价类型：0-自评，1-他人评价
        };
        markList.push(obj);
      });
      subData.markList = JSON.stringify(markList);
      console.log(subData);
      this.$store.state.loading = true;
      this.$store.state.loadingText = "提交数据中";
      const { success = false } = await service.score_save(subData);
      this.$store.state.loading = false;
      if (success) {
        this.$toast.success("提交成功");
        this.$goBack();
      }
    },
    // 检查表单
    checkFrom(arr) {
      let value = {
        isPass: true,
        errorMsg: ""
      };
      for (let i = 0; i < arr.length; i++) {
        const { messge, score } = arr[i];
        if (!messge) {
          value.isPass = false;
          value.errorMsg = "请输入自评";
          break;
        }
        if (!score) {
          value.isPass = false;
          value.errorMsg = "请输入评分";
          break;
        }

        if (score < 1 || score > 100) {
          value.isPass = false;
          value.errorMsg = "请输入1-100之间的数字(评分)";
          break;
        }
      }
      return new Promise(resolve => {
        resolve(value);
      });
    }
  }
};
</script>

<style scoped>
@import "./../../../components/public.css";
.rulePart-con-hide {
  height: 42px;
  overflow: hidden;
}
</style>